<template>
  <el-carousel
    :height="`${windowHeight}px`"
    direction="vertical"
    :interval="10000"
    arrow="never"
    indicator-position="none"
    :initial-index="randomInt"
  >
    <el-carousel-item v-for="item in imgUrl" :key="item">
      <el-image fit="fill" :src="'src/assets/img/' + item" @click="handleGet" />
    </el-carousel-item>
  </el-carousel>

  <el-dialog v-model="dialogSelect" title="欢迎来到狼人杀！" width="90%">
    <span>{{ log }}</span>
    <el-select
      v-model="seat"
      class="m-2"
      placeholder="默认不发动技能"
      size="large"
      style="width: 200px"
    >
      <el-option
        v-for="item in seatOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogSelect = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm('', false)"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogDoubleSelect" title="请选择两位号码" width="90%">
    <span>{{ log }}</span>
    <el-select
      v-model="seats"
      multiple
      class="m-2"
      placeholder="默认不发动技能"
      size="large"
      style="width: 200px"
      @change="multipleChange"
    >
      <el-option
        v-for="item in seatOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogDoubleSelect = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm('', true)"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogLog" title="请确认服务器消息！" width="90%" :before-close="handleClose">
    <span v-html="log"></span>
  </el-dialog>
  <el-dialog v-model="dialogWitch" title="女巫请行动！" width="90%" :before-close="handleClose">
    <span>{{ log }}</span>
    <el-select v-model="seat" class="m-2" placeholder="Select" size="large" style="width: 200px">
      <el-option
        v-for="item in seatOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleConfirm('0', false)">不操作</el-button>
        <el-button type="danger" @click="handleConfirm('2', false)" :disabled="seat == ''">
          毒他
        </el-button>
        <el-button type="success" @click="handleConfirm('1', false)" :disabled="!canSave">
          救他
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const seat = ref('')
const seats = ref([])
const log = ref('')
const canSave = ref(true)
const dialogSelect = ref(false)
const dialogLog = ref(false)
const dialogWitch = ref(false)
const dialogDoubleSelect = ref(false)

const windowHeight = window.innerHeight

let seatOptions: any[] = [
  {
    value: '1',
    label: '1号'
  },
  {
    value: '2',
    label: '2号'
  },
  {
    value: '3',
    label: '3号'
  },
  {
    value: '4',
    label: '4号'
  },
  {
    value: '5',
    label: '5号'
  },
  {
    value: '6',
    label: '6号'
  },
  {
    value: '7',
    label: '7号'
  },
  {
    value: '8',
    label: '8号'
  },
  {
    value: '9',
    label: '9号'
  },

  {
    value: '10',
    label: '10号'
  },
  {
    value: '11',
    label: '11号'
  },
  {
    value: '12',
    label: '12号'
  },
  {
    value: '13',
    label: '13号'
  }
]
const imgUrl = [
  '0.jpeg',
  '1.jpeg',
  '2.jpg',
  '3.jpg',
  '4.jpeg',
  '5.jpeg',
  '6.jpeg',
  '7.jpeg',
  '8.jpeg',
  '9.jpeg'
]
const randomInt = Math.floor(Math.random() * imgUrl.length)

const service = axios.create({
  baseURL: 'http://192.168.1.130:8600',
  timeout: 5000
})
service.interceptors.request.use(
  function (config) {
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  function (response) {
    return response
  },
  function (error) {
    return Promise.reject(error)
  }
)
function get() {
  return service({
    url: `/get`,
    method: 'get'
  })
}
function post(num: string, param1: string) {
  return service({
    url: `/post?seat=${num}&param1=${param1}`,
    method: 'get'
  })
}
function handleGet() {
  ElMessageBox.confirm('请确认是自己的行动阶段!').then(() => {
    seat.value = ''
    get().then((res) => {
      log.value = res.data.log
      switch (res.data.data) {
        case '-1':
          dialogLog.value = true
          break
        case '0':
          seatOptions = []
          for (let i = 0; i < res.data.playerNum; i++) {
            seatOptions.push({
              value: `${i + 1}`,
              label: `${i + 1}号`
            })
          }
          dialogSelect.value = true
          break
        case '5':
          dialogLog.value = true
          break
        case '3':
          canSave.value = res.data.canSave
          dialogWitch.value = true
          break
        case '7':
          dialogDoubleSelect.value = true
          break
        case '8':
          dialogDoubleSelect.value = true
          break
        default:
          dialogSelect.value = true
          break
      }
    })
  })
}
function handleConfirm(param1: string, double: boolean) {
  let msg
  let param: any
  if (double) {
    param = seats.value
    if (seats.value.length == 0) {
      msg = '确定不选择?'
    } else if (seats.value.length == 1) {
      msg = `系统默认您对自己和${seats.value[0]}号玩家发动技能，确定？`
    } else {
      msg = `确定选择${seats.value[0]}号和${seats.value[1]}号？`
    }
  } else {
    param = seat.value
    msg = seat.value == '' ? '确定不选择?' : `确定选择${seat.value}号？`
    if (param1 == '0') {
      msg = '确定不操作?'
    } else if (param1 == '1') {
      msg = '确定使用解药？'
    }
  }

  ElMessageBox.confirm(msg).then(() => {
    dialogSelect.value = false
    dialogDoubleSelect.value = false
    post(param, param1).then((res) => {
      log.value = res.data.log
      switch (res.data.data) {
        default:
          dialogLog.value = true
          break
      }
    })
  })
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('此对话框将不再展示，是否确认消息?').then(() => {
    done()
  })
}
function multipleChange() {
  if (seats.value.length > 2) {
    seats.value.pop()
  }
}
</script>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
